/**
 * created to by doujiabao
 */

import React, { PureComponent } from 'react'

class Page extends PureComponent {

    state = {
        isActive: 0,
        menu: [{
            path: '/',
            icon: [
                'https://hk-h5-cdn.levect.com/static/img/92-h5/home2.png',
                'https://hk-h5-cdn.levect.com/static/img/92-h5/home2_active.png'
            ]
        }, {
            path: '/discovery',
            icon: [
                'https://hk-h5-cdn.levect.com/static/img/92-h5/discovery3.png',
                'https://hk-h5-cdn.levect.com/static/img/92-h5/discovery3_active.png'
            ]
        }, {
            path: '/post',
            icon: [
                'https://hk-h5-cdn.levect.com/static/img/92-h5/icon_add2.png',
                'https://hk-h5-cdn.levect.com/static/img/92-h5/icon_add2_active.png'
            ]
        }, {
            path: '/msg',
            icon: [
                'https://hk-h5-cdn.levect.com/static/img/92-h5/msg2.png',
                'https://hk-h5-cdn.levect.com/static/img/92-h5/msg2_active.png'
            ]
        }, {
            path: '/me',
            icon: [
                'https://hk-h5-cdn.levect.com/static/img/92-h5/me2.png',
                'https://hk-h5-cdn.levect.com/static/img/92-h5/me2_active.png'
            ]
        }]
    }

    componentDidMount() {
        this.setState({
            isActive: this.state.menu.findIndex(itm => itm.path === window.location.pathname)
        })
    }

    render() {

        const {
            isActive,
            menu,
        } = this.state

        return (<div className='page'>

            {this.props.children}

            <ul className='menu'>

                {menu.map((itm, idx) => (<li key={idx}>
                    <img src={itm.icon[idx === isActive ? 1 : 0]} alt={itm.path} />
                </li>))}

                <style>{`
                    .page {
                        padding-bottom: 50px;
                    }
                    .menu {
                        width: 100%;
                        height: 50px;
                        background: #f00;
                        position: fixed;
                        bottom: 0;
                        left: 0;
                        display: flex;
                        background: #fcfcfc;
                        border-top: 1px solid #ededed;
                    }
                    .menu li {
                        flex: 1;
                        list-style: none;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .menu li img {
                        width: 36px;
                        height: 36px;
                    }
                `}</style>

            </ul>

        </div>)
    }

}

export default Page